<template>
    <transition name="musicListPage">
        <div class="musicListPage">
            <div class="listTop">
                <i class="iconfont icon-zuojiantou"
                   @click='back()'></i>
                <div class="titleWrap">
                    <span class="title"
                          v-if="titleLength">歌单</span>
                    <template v-else><span class="title">{{listInfo.name}}</span><span class="title">{{listInfo.name}}</span></template>
                </div>
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-sandiancaidan"></i>
            </div>
            <div class="scrollWrap"
                 @scroll='staticTop()'>
                <div class="listInfo">
                    <div class="listDetail">
                        <div class="listpic">
                            <img :src="listInfo.picUrl"
                                 alt="">
                            <i class="iconfont icon-information"></i>
                            <playCount :count='list.playCount'></playCount>
                        </div>
                        <div class="name">
                            <div class="listName">{{listInfo.name}}</div>
                            <div class="creator">
                                <!--<img :src="listInfo.creator.avatarUrl" alt=""><span>{{listInfo.creator.nickname}}</span><i class="iconfont icon-you"></i>-->
                            </div>
                        </div>
                    </div>
                    <div class="listOpertion">
                        <div class="listOpItem">
                            <i class="iconfont icon-tianjiawenjian"></i><span>{{list.subscribedCount || '收藏'}}</span>
                        </div>
                        <div class="listOpItem">
                            <i class="iconfont icon-pinglun"></i><span>{{list.commentCount || '评论'}}</span>
                        </div>
                        <div class="listOpItem">
                            <i class="iconfont icon-fenxiang"></i><span>{{list.shareCount || '分享'}}</span>
                        </div>
                        <div class="listOpItem">
                            <i class="iconfont icon-xiazaifujian"></i><span>下载</span>
                        </div>
                    </div>
                </div>
                <div class="list"
                     v-if="musiclist.length > 0">
                    <div class="listTitle">
                        <i class="iconfont icon-bofang leftIndex"></i>
                        <span>播放全部<i>(共{{list.trackCount}}首)</i></span>
                        <i class="iconfont icon-icon">多选</i>
                    </div>
                    <div class="listitem"
                         v-for="(item,index) in musiclist">
                        <span class="leftIndex">{{index + 1}}</span>
                        <div class="musicInfo"
                             @click='play(item)'>
                            <p class="musicName">{{item.name}}</p>
                            <p class="singerAlbum"><span class="singer">{{item.ar | singerName}}</span> - <span class="albumName">{{item.al.name}}</span></p>
                        </div>
                        <i class="iconfont icon-sandian"></i>
                    </div>
                </div>
                <div v-else
                     class="loading">努力加载中</div>
            </div>
        </div>
    </transition>
</template>
<script type="text/ecmascript-6">
import playCount from '../playCount/playCount';
export default {
    data() {
        return {
            list: {},
            musiclist: [],
            titleLength: true
        }
    },
    components: {
        playCount
    },
    created() {

    },
    mounted() {
        this.getMusicList();
    },
    methods: {
        getMusicList() {
            var id = this.$store.state.musicList.id;
            this.$http.get('http://localhost:3000/playlist/detail?id=' + id)
                .then(response => {
                    this.list = response.body.playlist;
                    this.musiclist = response.body.playlist.tracks;
                })
        },
        back() {
            this.$store.commit('isMusicList', false);
        },
        staticTop() {
            var scroll = document.querySelector('.scrollWrap');
            var top = document.querySelector('.listTop');
            var wrap = top.querySelector('.titleWrap');
            var title = top.querySelector('.title');
            if (scroll.scrollTop > 400) {
                top.style.background = 'red';
                this.titleLength = false;
            } else {
                top.style.background = 'rgba(0,0,0,0)';
                this.titleLength = true;
            }
        },
        play(m) {
            this.$http.get('http://localhost:3000/music/url?id=' + m.id)
                .then(response => {
                    var music = {
                        mid: m.id,
                        name: m.name,
                        artists: m.ar,
                        ablumName: m.al.name,
                        ablumPic: m.al.picUrl,
                        musicUrl: response.body.data[0].url
                    }
                    this.$store.commit('addsong', music);
                    this.$store.commit('play');
                })
        }
    },
    computed: {
        listInfo() {
            return this.$store.state.musicList;
        }
    },
    filters: {
        singerName(value) {
            if (value.length > 1) {
                var arr = [];
                value.forEach(function (e) {
                    arr.push(e.name);
                });
                return arr = arr.join('/');
            } else {
                return value[0].name;
            }
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import url('../../../../static/css/iconfont.css');
@import '../../../../static/base/public.scss';
.musicListPage-enter {
    transform: translateY(1.4rem);
    opacity: 0;
}

.musicListPage-enter-active {
    transition: all .4s;
}

.musicListPage-leave-active {
    transition: all .4s;
    transform: translateY(1.4rem);
    opacity: 0;
}

.musicListPage {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #ffffff;
    z-index: 200; // padding-top: rem(126);
    .listTop {
        position: fixed;
        display: flex;
        align-items: center;
        top: 0;
        left: 0;
        z-index: 200;
        height: rem(126);
        width: 100%;
        background: rgba(#000000, 0);
        color: #ffffff;
        .titleWrap {
            flex: auto;
            white-space: nowrap;
            overflow: hidden;
            width: rem(450);
        }
        .iconfont {
            flex: none;
            padding: 0 .2rem;
        }
    }
    .scrollWrap {
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        .listInfo {
            padding-top: rem(126);
            height: rem(430);
            background: red;
            flex: none;
            .listDetail {
                display: flex;
                padding-top: rem(20);
                .listpic {
                    position: relative;
                    flex: none;
                    width: rem(262);
                    height: rem(262);
                    margin-left: rem(48);
                    margin-right: rem(36);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    .icon-information {
                        position: absolute;
                        bottom: 4%;
                        right: 4%;
                        color: #ffffff;
                    }
                }
                .name {
                    padding-right: rem(60);
                    padding-top: rem(24);
                    .listName {
                        color: #ffffff;
                        margin-bottom: rem(52);
                    }
                    .creator {
                        display: flex;
                        align-items: center;
                        color: #ffffff;
                        img {
                            width: rem(54);
                            border-radius: 50%;
                            margin-right: .1rem;
                        }
                        span {
                            margin-right: 0.05rem;
                        }
                    }
                }
            }
            .listOpertion {
                margin-top: rem(50);
                display: flex;
                color: #ffffff;
                .listOpItem {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    .iconfont {
                        margin-bottom: rem(14);
                    }
                }
            }
        }
        .list {
            background: #f2f4f5;
            .listTitle {
                display: flex;
                height: rem(102);
                align-items: center;
                border-bottom: 1px solid #e5e7e8;
                span {
                    width: rem(528);
                    i {
                        font-style: normal;
                        color: #919293;
                    }
                }
            }
            .listitem {
                display: flex;
                align-items: center;
                height: rem(114);
                border-bottom: 1px solid #e5e7e8;
                .leftIndex {
                    color: #919293;
                }
                .musicInfo {
                    width: rem(562);
                    color: #797a7b;
                    .musicName {
                        @extend %text-overflow;
                        color: #000000;
                    }
                    .singerAlbum {
                        @extend %text-overflow;
                    }
                }
                .icon-sandian {
                    color: #aaabac;
                }
            }
            .leftIndex {
                width: rem(104);
                text-align: center;
            }
        }
        .loading {
            display: flex;
            padding-top: 2rem;
            justify-content: center;
        }
    }
}

[data-dpr='1'] .leftIndex {
    font-size: 22px;
}

[data-dpr='2'] .leftIndex {
    font-size: 42px;
}

[data-dpr='3'] .leftIndex {
    font-size: 64px;
}

[data-dpr='1'] .musicName {
    font-size: 14px;
    line-height: 24px;
}

[data-dpr='2'] .musicName {
    font-size: 30px;
    line-height: 48px;
}

[data-dpr='3'] .musicName {
    font-size: 42px;
    line-height: 72px;
}

[data-dpr='1'] .singer {
    font-size: 12px;
}

[data-dpr='2'] .singer {
    font-size: 22px;
}

[data-dpr='3'] .singer {
    font-size: 36px;
}

[data-dpr='1'] .musicInfo .albumName {
    font-size: 12px;
}

[data-dpr='2'] .musicInfo .albumName {
    font-size: 22px;
}

[data-dpr='3'] .musicInfo .albumName {
    font-size: 36px;
}

[data-dpr='1'] .listitem .leftIndex {
    font-size: 14px;
}

[data-dpr='2'] .listitem .leftIndex {
    font-size: 28px;
}

[data-dpr='3'] .listitem .leftIndex {
    font-size: 42px;
}

[data-dpr='1'] .listTitle span {
    font-size: 16px;
}

[data-dpr='2'] .listTitle span {
    font-size: 32px;
}

[data-dpr='3'] .listTitle span {
    font-size: 48px;
}

[data-dpr='1'] .icon-icon {
    font-size: 16px;
}

[data-dpr='2'] .icon-icon {
    font-size: 32px;
}

[data-dpr='3'] .icon-icon {
    font-size: 48px;
}

[data-dpr='1'] .icon-sandian {
    font-size: 32px;
}

[data-dpr='2'] .icon-sandian {
    font-size: 66px;
}

[data-dpr='3'] .icon-sandian {
    font-size: 96px;
}



[data-dpr='1'] .listOpItem .iconfont {
    font-size: 16px;
}

[data-dpr='2'] .listOpItem .iconfont {
    font-size: 34px;
}

[data-dpr='3'] .listOpItem .iconfont {
    font-size: 48px;
}

[data-dpr='1'] .listOpItem span {
    font-size: 12px;
}

[data-dpr='2'] .listOpItem span {
    font-size: 22px;
}

[data-dpr='3'] .listOpItem span {
    font-size: 24px;
}



[data-dpr='1'] .listName {
    font-size: 16px;
    line-height: 20px;
}

[data-dpr='2'] .listName {
    font-size: 32px;
    line-height: 40px;
}

[data-dpr='3'] .listName {
    font-size: 48px;
    line-height: 60px;
}

[data-dpr='1'] .creator {
    font-size: 12px;
}

[data-dpr='2'] .creator {
    font-size: 24px;
}

[data-dpr='3'] .creator {
    font-size: 36px;
}

[data-dpr='1'] .icon-information {
    font-size: 16px;
}

[data-dpr='2'] .icon-information {
    font-size: 32px;
}

[data-dpr='3'] .icon-information {
    font-size: 48px;
}


[data-dpr='1'] .listTop span {
    font-size: 18px;
}

[data-dpr='2'] .listTop span {
    font-size: 36px;
}

[data-dpr='3'] .listTop span {
    font-size: 56px;
}

[data-dpr='1'] .listTop .icon-zuojiantou {
    font-size: 26px;
}

[data-dpr='2'] .listTop .icon-zuojiantou {
    font-size: 54px;
}

[data-dpr='3'] .listTop .icon-zuojiantou {
    font-size: 78px;
}

[data-dpr='1'] .listTop .icon-sousuo {
    font-size: 24px;
}

[data-dpr='2'] .listTop .icon-sousuo {
    font-size: 50px;
}

[data-dpr='3'] .listTop .icon-sousuo {
    font-size: 72px;
}

[data-dpr='1'] .listTop .icon-sandiancaidan {
    font-size: 22px;
}

[data-dpr='2'] .listTop .icon-sandiancaidan {
    font-size: 44px;
}

[data-dpr='3'] .listTop .icon-sandiancaidan {
    font-size: 66px;
}
</style>
